<template>
    <!-- 出纳工作台-日记账 -->
    <section class="content-box">
		<div>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form style="display:flex;line-height:5px;justify-content: space-between;">
                <h1>日记账</h1>
                <el-form-item>
                    <el-button type="primary" @click="chaxun()">
                        <i class="el-icon-check" ></i> 显示查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!-- 表格 -->
        <el-table ref="singleTable" :data="tableData" highlight-current-row max-height="700" >
			<el-table-column type="index" width="100">
			</el-table-column>
			<el-table-column property="CreateDateStr" label="日期" width="180" sortable>
			</el-table-column>
			<el-table-column property="DA_SrcDocID" label="单据号" width="180" sortable>
			</el-table-column>
			<el-table-column property="DA_Abstracts" label="摘要" show-overflow-tooltip>
			</el-table-column>
			<el-table-column property="DA_JieMoney" label="借方" align="right">
			</el-table-column>
			<el-table-column property="DA_DaiMoney" label="贷方" align="right">
			</el-table-column>
			<el-table-column property="EndBalance" label="余额" align="right">
			</el-table-column>
		</el-table>
        <!-- 隐藏页面 -->
        <el-dialog title="查询条件" :visible.sync="dialogFormVisible" size="small" :modal-append-to-body="false">
		  <div style="padding: 0px 3%;margin-bottom: 25px;">
		  	<span>期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：</span>
                <el-select v-model="Fu" @change="changeF(Fu)" placeholder="请选择" style="width: 39%;">
                    <el-option v-for="item in Fu_Date" :key="item.Period_Code" :label="item.Period_Name" :value="item.Period_Code">
                    </el-option>
                </el-select>
            <span style="margin-left: 10px;">至：</span>
                <el-select v-model="Yu" @change="changeY(Yu)" placeholder="请选择" style="width: 39%;">
                    <el-option v-for="item in Yu_Date" :key="item.Period_Code" :label="item.Period_Name" :value="item.Period_Code">
                    </el-option>
                </el-select>
            </div>
            <div style="padding: 0px 3%;margin-bottom: 10px;">
		  	<span>会计科目：</span>
                <template>
				  <el-select v-model="value8" filterable placeholder="请选择" @change="change8(value8)" style="width: 39%;">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
				      >
				    </el-option>
				  </el-select>
				</template>
		  </div>
		  
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="ProfitQueding()">确 定</el-button>
		  </div>
		</el-dialog>
		<!-- 损益判断-->
		</div>
    </section>
</template>
<script>
import axios from "../../util/axios";
export default {
    name: 'Detalis',
    data(){
        return {
            tableData: [],
            dialogFormVisible:false,
            mcurrentRow: null,
            Period:'',//默认第一个
            options: [],//会计科目集合
	        value8: '',//选择的会计科目
	        Fu_Date:[],//日期集合（起）
	        Fu:'',//选择的日期（起）
	        Yu_Date:[],//日期集合（至）
	        Yu:'',//选择的日期（至）
	        Dnum:'',//会计num
        }
    },
    methods: {
    	//时间过滤
//	    	formatDate(row, column) {
//	    		console.log(row.DA_CreateDate)
//	    		var date = new Date(row.DA_CreateDate);
//				var Y = date.getFullYear() + '-';
//				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
//				var D = date.getDate() + ' ';
//				console.log(Y+M+D); //呀麻碟
//		      return Y+M+D;
//		    },
		CXAccountItem(){
			axios
			.post("GetAccountItemListFu",{CashOrBank:0})
			    .then( res=>{
			        console.log(res)
			        console.log(res.length)
			        let Details = []
			        for(let i = 0 ; i<res.length ; i++ ){
			        	let Data = { value: res[i].Code , label: res[i].Code + res[i].Name}
			        	Details.push(Data)
			        }
			        this.options = Details
			        console.log(this.options)
			    })
			    .catch(error=>{
			    	console.log(error);  
			    });		
		},
		change8(e){
			console.log(e)
			this.Dnum = e
		},
		getDate(){
	        axios
	        .post('getDate')
		        .then(res =>{
	        		   console.log(res)
		               this.Fu_Date = res;
		               this.Yu_Date = res;
		               this.Fu_GetPeriodList()
		        })
		        .catch(err =>{
		               console.log(err)
		        })
	    },
	    Fu_GetPeriodList(){//当前期间
				axios
				.post('Fu_GetPeriodList')
				.then(res => {
					console.log(res);
					for(let i = 0 ; i < res.length ; i++){
						if(res[i].IsCurrent ==1){
							this.Fu = res[i].Code
							this.Yu = res[i].Code
						}
					}
				
				})
				.catch(err => {
					console.log(err);
				})
				
		},
	    changeF(e){
	    	console.log(e)
	    },
	    
	    changeY(e){
	    	console.log(e)
	    },
		mingxi(){
			this.dialogFormVisible = true
			
		},
		ProfitQueding(){
			console.log(this.Fu)
			console.log(this.Yu)
			console.log(this.Dnum)
			axios
				.post('GridPageListJsonFu',
				{
	                fromPeriod:this.Fu,
	                toPeriod:this.Yu,
	                AccountItem:this.Dnum,
	            })
					.then(res=>{
						console.log("11111111111111111111")
		                console.log(res,"列表数据")
		                this.tableData = res;
		                this.dialogFormVisible = false
		            }).catch(err => {
		                console.log(err);
		            })
		},
		chaxun(){
			this.dialogFormVisible = true
//			this.value8 = ''
//			this.Fu = ''
//			this.Yu = ''
		},  	
    },
    mounted() {
	    this.mingxi()
	    this.CXAccountItem()
	    this.getDate()
	}

}
</script>

